<template>
    <div class="ex-in-the-media">
        <div class="eitm-title">
            <div class="t1">
                Videos
            </div>
        </div>
        <div class="eitm-content-img">
            <div class="eitm-img" @click="showDetail">
                <img :src="coverUrl">
                <div class="cover">
                    <img src="/video/play2.png">
                </div>
            </div>
        </div>
        <div class="eitm-type">
            <div class="et-content">
                <div class="et-right">{{ des }}</div>
            </div>
        </div>
        <!-- <div class="eitm-content">
            <div class="eitm-card">
                <div class="eitm-img" @click="showDetail">
                    <img src="/images/car_pic/banner_on_05.jpg">
                    <div class="cover">
                        <img src="/video/play2.png">
                    </div>
                </div>
            </div>
            <div class="eitm-card" @click="showDetail">
                <div class="eitm-img">
                    <img src="/images/car_pic/banner_on_05.jpg">
                    <div class="cover">
                        <img src="/video/play2.png">
                    </div>
                </div>
            </div>
            <div class="eitm-card" @click="showDetail">
                <div class="eitm-img">
                    <img src="/images/car_pic/banner_on_05.jpg">
                    <div class="cover">
                        <img src="/video/play2.png">
                    </div>
                </div>
            </div>
        </div> -->
        <div class="em-btn-div"  @click="turnTo()">
            <div class="em-more-btn">
                Show More Videos
            </div>
        </div>

    </div>

    <div class="dialogContent">
        <el-dialog v-model="dialogVisible" :show-close=false :destroy-on-close=true>
           <VideoDetail :resourceUrl="resourceUrl"
           :title="title"
           :des="des"
           :publishTime="publishTime"></VideoDetail>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const dialogVisible = ref(false)

const props = defineProps({
  des: {
    type: String,
    required: false,
  },
  title: {
    type: String,
    required: false,
  },
  publishTime: {
    type: String,
    required: false,
  },
  resourceUrl: {
    type: String,
    required: false,
  },
  coverUrl: {
    type: String,
    required: false,
  },
});

const des = ref(`Media
                    information content Media information content Media information content Media information content
                    Media information content Media information content Media information content`)
const coverUrl = ref("/images/car_pic/banner_on_05.jpg");
const resourceUrl = ref("");
const title = ref("");
const publishTime = ref("");

if(props.des){
    des.value = props.des;
}
if(props.title){
    title.value = props.title;
}
if(props.publishTime){
    publishTime.value = props.publishTime;
}
if(props.resourceUrl){
    resourceUrl.value = props.resourceUrl;
}
if(props.coverUrl){
  coverUrl.value = props.coverUrl;
}

const showDetail = () => {
    dialogVisible.value = true;
}
const router = useRouter();
const turnTo = () => {
    router.push({
        path: `/search`, query: {type: 2}
    })
}

</script>
<style scoped lang="scss">
.dialogContent {
    :deep(.el-dialog) {
        width: 1024px;
        padding: 0px;
    }

    :deep(.el-dialog__header) {
        display: none;
    }

    :deep(.el-dialog__footer) {
        padding: 10px;
        padding-left: 32px;

    }

}

.ex-in-the-media {
    width: 1600px;
    // height: 1672px;
    background-color: #fff;

    padding: 0px 160px;
    /*padding-top: 103px;*/
    padding-bottom: 100px;

    .eitm-title {
        width: 1600px;
        text-align: center;

        .t1 {
            width: 100%;
            font-size: 64px;
            font-weight: 600;
            margin-bottom: 76px;
            // color: transparent;
        }

    }

    .eitm-content-img {
        width: 1600px;
        height: 703px;

        // background-color: rgba(0, 0, 0, 0.15);
        .eitm-img {
            width: 100%;
            height: 100%;
            // background-color: rgba(0, 0, 0, 0.15);
            // margin-bottom: 20px;
            // height: auto;
            cursor: pointer;

            img {
                width: 100%;
                // cursor: pointer;
                z-index: 20;
                max-height: 100%;
                object-fit: cover;
            }


            .cover {
                position: relative;
                bottom: 703px;
                width: 1600px;
                height: 700px;
                // position: absolute;
                background-color: rgba(0, 0, 0, 0.3);
                opacity: 1;
                text-align: center;

                img {
                    width: 70px;
                    position: relative;
                    top: 300px;
                    // transform: translateY(-50%);
                    max-width: 283px;
                    transition: all 0.6s;
                }

            }

            .cover:hover img {
                transform: scale(1.1);
            }

        }
    }

    .eitm-type {
        width: 100%;
        padding-top: 48px;

        .et-content {
            display: inline-flex;
            justify-content: space-between;
            width: 100%;

            .et-right {
                width: 1600px;
                font-size: 16px;
                line-height: 24px;
            }
        }
    }

    .eitm-content {
        width: 1600px;
        margin-top: 85px;
        display: inline-flex;
        justify-content: space-between;
        // padding: 0 60px;

        .eitm-card {
            width: 506px;
            height: 289.5px;

        }

        .eitm-img {
            // width: 100%;
            // height: 100%;
            // background-color: rgba(0, 0, 0, 0.15);
            // margin-bottom: 20px;
            // height: auto;
            cursor: pointer;

            img {
                width: 100%;
                // cursor: pointer;
                z-index: 20;
                max-height: 100%;
                object-fit: cover;
            }


            .cover {
                position: relative;
                bottom: 283px;
                width: 506px;
                height: 280px;
                background-color: rgba(0, 0, 0, 0.3);
                opacity: 1;
                text-align: center;

                img {
                    width: 70px;
                    position: relative;
                    top: 120px;
                    // transform: translateY(-50%);
                    max-width: 283px;
                    transition: all 0.6s;
                }

            }

            .cover:hover img {
                transform: scale(1.1);
            }

        }
    }


    .em-btn-div {
        text-align: center;
        width: 1600px;
        margin-top: 69px;

        .em-more-btn {
            user-select: none;
            display: inline-block;
            // margin-left: 60px;
            width: 296px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background: rgb(50, 115, 174, 0.08);
            border-bottom: 4px solid #3273AE;
            color: #000000;
            cursor: pointer;
            transition: background-color .3s;
            font-size: 16px;
        }

        .em-more-btn:hover {
            background-color: rgb(50, 115, 174, 0.28);
        }

    }

    .pagination-box {
        position: absolute;
        right: 150px;
        bottom: 100px;
    }
}
</style>
